<template>
  <div>
    <h1>App</h1>

    <ul>
      <li> <a href="#/home/list">Home</a> </li>
      <li> <a href="#/shop/1">Shop</a> </li>
      <li> <a href="#/user/id/1">User</a> </li>
    </ul>
    <component :is="comName"></component>
  </div>
</template>
<script>
import Home from './Home.vue';
import Shop from './Shop.vue';
import User from './User.vue';

export default {
  components: {
    Home, Shop, User
  },
  data() {
    return {
      comName: 'Home',
      routes: {
        // 路由表
        '/home/list': 'Home', 
        '/shop/1': 'Shop',
        '/user/id/1': 'User',
      }
    };
  },
  mounted() {
    window.onhashchange = () => {
      const hash = window.location.hash.slice(1);
      this.comName = this.routes[hash];
    };
  }

};
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>